<!--
 * @Author: cl
 * @Description: 用来练习高德地图使用
 * @Date: 2022-09-13 17:34:45
 * @LastEditTime: 2023-08-03 18:11:50
 * @FilePath: \vue3\src\views\map\gaodeMap.vue
-->
<template>
  <div>
    <div id="container">
      <div class="btn">
        <el-dropdown split-button type="primary">
          地图功能示例
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="setType('setLine')"
                >画线</el-dropdown-item
              >
              <el-dropdown-item
                @click="
                  setType('move');
                  setPathSimplifier();
                "
                >轨迹</el-dropdown-item
              >
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button @click="removeLine()">清除地图</el-button>
      </div>
      <div class="pathBtns" v-if="type == 'setLine'">
        <el-button @click="addPoint()">添加点</el-button>
        <el-button @click="setLine()">添加线</el-button>
        <el-button @click="removeLine()">清除线</el-button>
      </div>

      <div class="pathBtns" v-if="type == 'move'">
        <el-button @click="startAnimation()">开始动画</el-button>
        <el-button @click="pauseAnimation()">停止动画</el-button>
        <el-button @click="resumeAnimation()">继续动画</el-button>
        <el-button @click="stopAnimation()">结束动画</el-button>
        <div>
          <el-button-group>
            <el-button type="primary" @click="speedControl(1)">1X</el-button>
            <el-button type="primary" @click="speedControl(2)">2X</el-button>
            <el-button type="primary" @click="speedControl(4)">4X</el-button>
            <el-button type="primary" @click="speedControl(8)">8X</el-button>
            <el-button type="primary" @click="speedControl(16)">16X</el-button>
          </el-button-group>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { shallowRef, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

//data
//地图
let map = shallowRef(null);
let type = ref("");
let mapSpeed = ref(200);
let circleB = ref(false);
//标记点和线
var marker,
  lineArr = [
    [112.55187, 37.78165],
    [112.554455, 37.78159],
    [112.556719, 37.781616],
    [112.561097, 37.781599],
    [112.561504, 37.783507],
    [112.559283, 37.783575],
  ];

//method
/**
 * 初始化地图
 */
const initMap = () => {
  window._AMapSecurityConfig = {
    securityJsCode: "3ba6501b9955bb6a531ce67035570ff4",
  };
  AMapLoader.load({
    key: "a502a10c36c57861d480ddb2c24fdeef", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.MoveAnimation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("container", {
        //设置地图容器id
        viewMode: "2D", //是否为3D地图模式
        zoom: 13, //初始化地图级别
        center: [112.562427, 37.786068], //初始化地图中心点位置
        mapStyle: "amap://styles/dark",
      });
      setMapLsitener();
    })
    .catch((e) => {
      console.log(e);
    });
};

//添加点
const addPoint = () => {
  let a = [112.55187, 37.78165];
  let marker = new window.AMap.Marker({
    position: a, //不同标记点的经纬度
    offset: new AMap.Pixel(-12, -32),
    icon: "/src/assets/start.png",
  });
  marker.on("click", pointClick, map.add(marker));
};

const pointClick = (marker) => {
  console.log(marker);
  removePoint(marker);
};
const removePoint = (marker) => {
  console.log("-----");
  map.remove(marker);
};
const speedControl = (speed) => {
  mapSpeed.value = speed * 200;
  circleB.value = !circleB.value;
  console.log(circleB.value);
  startAnimation();
};

/**
 * 设置折线
 */
const setLine = () => {
  //画折线得数据
  let path = [
    new AMap.LngLat(112.55187, 37.78165),
    new AMap.LngLat(112.554455, 37.78159),
    new AMap.LngLat(112.556719, 37.781616),
    new AMap.LngLat(112.561097, 37.781599),
  ];

  let polyline = new AMap.Polyline({
    path: path,
    borderWeight: 1, // 线条宽度，默认为 1
    strokeColor: "red", // 线条颜色
    lineJoin: "round", // 折线拐点连接处样式
  });
  map.add(polyline);
  map.setFitView();
};
/**
 * 移除折线
 */
const removeLine = () => {
  map.clearMap();
};
/**
 * 设置轨迹回放
 */
const setPathSimplifier = () => {
  var icon = new AMap.Icon({
    size: new AMap.Size(40, 50), // 图标尺寸
    image: "/src/assets/cangku.png", // Icon的图像
    imageOffset: new AMap.Pixel(0, -60), // 图像相对展示区域的偏移量，适于雪碧图等
    imageSize: new AMap.Size(40, 50), // 根据所设置的大小拉伸或压缩图片
  });
  marker = new AMap.Marker({
    map: map,
    position: [112.55187, 37.78165],
    icon: icon,
    offset: new AMap.Pixel(-13, -26),
  });
  // 绘制轨迹
  var polyline = new AMap.Polyline({
    map: map,
    path: lineArr,
    showDir: true,
    strokeColor: "#124567", //线颜色
    // strokeOpacity: 1,     //线透明度
    strokeWeight: 6, //线宽
    // strokeStyle: "solid"  //线样式
  });

  var passedPolyline = new AMap.Polyline({
    map: map,
    strokeColor: "#4EB214", //线颜色
    strokeWeight: 6, //线宽
  });

  marker.on("moving", function (e) {
    passedPolyline.setPath(e.passedPath);
    map.setCenter(e.target.getPosition(), true);
  });
  marker.on("click", function (e) {
    marker.moveto;
  });
  map.setFitView();
};
//开始动画
const startAnimation = () => {
  if (!marker || !lineArr) return;
  marker.moveAlong(lineArr, {
    // 每一段的时长
    // duration: 500, //可根据实际采集时间间隔设置
    // JSAPI2.0 是否延道路自动设置角度在 moveAlong 里设置
    // autoRotation: true,
    speed: mapSpeed.value,
    circlable: circleB.value,
  });
  // marker.moveAlong(
  //   lineArr,
  //   mapSpeed.value,
  //   function (k) {
  //     return k;
  //   },
  //   circleB.value
  // );
};
//暂停动画
const pauseAnimation = () => {
  marker.pauseMove();
};
//重新开始动画
const resumeAnimation = () => {
  marker.resumeMove();
};
//停止动画
const stopAnimation = () => {
  marker.stopMove();
};
/**
 * 设置监听
 */
const setMapLsitener = () => {
  map.on("click", function (ev) {
    // 触发事件的对象
    var target = ev.target;
    // 触发事件的地理坐标，AMap.LngLat 类型
    var lnglat = ev.lnglat;
    // 触发事件的像素坐标，AMap.Pixel 类型
    var pixel = ev.pixel;
    // 触发事件类型
    var type = ev.type;
    console.log(target);
  });
};
/**
 * 点击
 */
const handleClick = (e) => {
  console.log(e);
  switch (e) {
    case "setLine":
      setLine();
      break;
    case "setPathSimplifier":
      setPathSimplifier();
      break;
  }
};
/**
 * 设置类型
 */
const setType = (pageType) => {
  console.log(pageType);
  type.value = pageType;
};

//初始化页面
initMap();
// setLine();
</script>

<style lang="scss" scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
.btn {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 99;
}
.pathBtns {
  position: absolute;
  top: 100px;
  left: 100px;
  z-index: 99;
}
// .amap-icon img {
//   position: static;
// }
</style>
